/**
 * LoopProperty
 */

 var React = require("react");
 var storage = require("../../../utils/storage");
 var CommonProperty = require("./CommonProperty");
 var LoopProperty = React.createClass({
    mixins: [CommonProperty],
    getInitialState: function (){
        return {
            repeat_count_type: 0
        }
    },
    getInitialProps: function (){
        return {
            parent: {},
            anType: {}
        }
    },
    componentWillMount: function (){
        var parent = this.props.parent;
        this.handleOnInputBlur = parent.handleOnInputBlur;
        this.handleOnPropertyChanged = parent.handleOnPropertyChange;
    },
    handleOnPropertyChange: function (type, e){
        var className = "";
        var parent = this.props.parent;
        var element = $(e.target || e.srcElement);

        var repeat_count_type = element.val();

        this.setState({
            repeat_count_type: repeat_count_type
        });

        parent.handleOnPropertyChange(type, e);
    },
    render: function (){
        var parent = this.props.parent;
        var anType = this.props.anType;
        var inputTipNode = "";
        if (anType.repeat_count == undefined && anType.repeat_count_type == 1){
            inputTipNode = <div style={{color:"#777620"}}>{$._('Input 1-100, integer')}</div>
        }
        var lan = storage.data.lan;
        if(lan == 'ja_JP'){
            var lanStyle = {
                width: '160px'
             }
         }
        else var lanStyle = {}
        return (
            <div>
                <div className="rowlist">
                    <label className="label-for-title">{$._("Loop")}</label>
                    <label className="select-label-help">
                        <select name="loop_type" onChange={this.handleOnPropertyChanged.bind(null, "loop_type")} onBlur={this.handleOnInputBlur.bind(null, "loop_type")} className="select-loop_type form-control" value={anType.loop_type} style={lanStyle}>
                            <option value="0">{$._("No")}</option>
                            <option value="1">Cycle</option>
                            <option value="2">PingPong</option>
                        </select>
                    </label>
                </div>
                <div className="rowlist" style={{display:(anType.loop_type > 0 ? "block" : "none")}}>
                    <label className="label-for-title">{$._("Times")}</label>
                    <label className="select-label-help">
                        <select name="repeat_count_type" onChange={this.handleOnPropertyChange.bind(this, "repeat_count_type")} onBlur={this.handleOnInputBlur.bind(null, "repeat_count_type")} className="select-repeat_count form-control" value={anType.repeat_count_type}>
                            <option value="0">{$._("Infinite loop")}</option>
                            <option value="1">{$._("Enter times")}</option>
                        </select>
                    </label>
                    <div className="repeat-count">
                        <input name="repeat_count" onChange={this.handleOnPropertyChanged.bind(null, "repeat_count")} onBlur={this.handleOnInputBlur.bind(null, "repeat_count")} className='form-control' value={anType.repeat_count} style={{display:(anType.repeat_count_type == 1 ? "block" : "none")}} type="number" step="1" min="1" max="100" />
                        {inputTipNode}
                    </div>
                </div>
            </div>
        )
    }
 });

 module.exports = LoopProperty;
